<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>DemoAuth</title>
    <script src="/jquery-3.5.0.min.js"></script>
</head>
<body>
<p>Hello，Spring OAuth2 and Security Demo!</p>
<p>GrantType---Implicit</p>
<!--response_type为token，redirect_uri为自身，以便用这里的js解析token，然后用ajax带上token请求受保护资源，全程不需要后台controller的参与-->
<a href="http://localhost:8770/oauth/authorize?client_id=client_1&scope=webclient&response_type=token&redirect_uri=http://localhost:8780/index.html">第三方授权登录(简化模式)</a>
<div id="result">
    <h3 id="title">你已成功授权登录！</h3>
    <p id="token"></p>
    <p id="data1"> </p>
    <p id="data2"> </p>
</div>
<script>
    $("#result").hide();
     var hash = window.location.hash;  //提取出参数，类似这种格式#access_token=9fda1800-3b57-4d32-ad01-05ff700d44cc&token_type=bearer&expires_in=7199
     if (hash.length > 0) {
        var params = hash.substring(1).split("&");
        var token = params[0].split("=");
        $.ajax({
            type: 'GET',
            headers: {
                'Authorization': 'Bearer ' + token[1]
            },
            url: 'http://localhost:8790/order/100',
            success: function(data) {
                $("#result").show();
                $("#token").text("--令牌(access token)："+token[1]);
                $("#data1").text("--受保护资源访问结果1："+data);
            },
            error: function (e) {
                alert("error1-------"+e.message)
            }
        })
         $.ajax({
            type: 'GET',
            headers: {
                'Authorization': 'Bearer ' + token[1]
            },
            url: 'http://localhost:8790/order/repo/500',
            success: function(data) {
                $("#data2").text("--受保护资源访问结果2："+data);
            },
            error: function (e) {
                alert("error2"+e.message)
            }
        })
    }
</script>
</body>
</html>